#root {
    width: 100%;
    height: 100%;
}
.noise-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
/* 动画 */
.animated-router {
    overflow: hidden;
}
.animated-router-container {
    /* 动画容器节点 */
    width: 100%;
    height: 100%;
}
.animated-router-in-transition {
    /* 页面动画中 */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.animated-router-forward-appear,
.animated-router-forward-enter {
    transform: translateY(100%);
    opacity: 0;
}
.animated-router-forward-appear-active,
.animated-router-forward-enter-active {
    transform: translateY(0);
    opacity: 1;
}
.animated-router-forward-exit {
    transform: translateY(0);
    opacity: 1;
}
.animated-router-forward-exit-active {
    transform: translateY(100%);
    opacity: 0;
}
.animated-router-backward-appear,
.animated-router-backward-enter {
    transform: translateY(100%);
    opacity: 0;
}
.animated-router-backward-appear-active,
.animated-router-backward-enter-active {
    transform: translateY(0);
    opacity: 1;
}
.animated-router-backward-exit {
    transform: translateY(0);
    opacity: 1;
}
.animated-router-backward-exit-active {
    transform: translateY(100%);
    opacity: 0;
}
.animated-router-forward-appear-active,
.animated-router-forward-enter-active,
.animated-router-forward-exit-active,
.animated-router-backward-appear-active,
.animated-router-backward-enter-active,
.animated-router-backward-exit-active {
    /* 不同过渡阶段需要的过渡时间与缓动效果 */
    transition: transform 0.7s, opacity 1s ease;
}
.animated-router-forward-exit,
.animated-router-backward-exit {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
